<include file="public@header" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
	<div id="app" style="margin: 20px 60px;">
		<el-form :inline="true" :model="form" class="demo-form-inline">
			<div v-for="(item,index) in form">
				<el-form-item :label="'属性' + (index + 1)">
					<el-input v-model="item.attr" placeholder="属性 "></el-input>
				</el-form-item>
				<el-form-item :label="'属性值' + (index + 1)">
					<el-input v-model="item.attrVal" placeholder="属性值1,属性值2,属性值3"></el-input>
				</el-form-item>
				<el-button type="danger" @click="delForm(index)">移除属性</el-button>
			</div>
			<div>
				<el-form-item>
					<el-button type="default" @click="addForm">增加属性</el-button>
				</el-form-item>
			</div>
			<div>

				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
				</el-form-item>
			</div>

		</el-form>
	</div>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		v = new Vue({
			el: '#app',
			data: {
				form:[
					{attr:'',attrVal:''}
				],
				gid:'{$id}'
			},
			methods: {
				//增加属性
				addForm ()
				{
					this.form.push({attr:'',attrVal:''})
				},
				//移除属性
				delForm(index)
				{
					this.form.splice(index,1);
				},
				//提交
				onSubmit ()
				{
					$.ajax({
						url:"{:url('Goods/getAttrValPost')}",
						type:'post',
						data:{
							form:this.form,
							gid:this.gid
						},
						success(res){
							if (res.code == 1) {
								v.$message({
									message: res.msg,
									type: 'success',
								});

								setTimeout(function () {
									location.reload()
								}, 1500);
							}else {
								v.$message({
									message: res.msg,
									type: 'error',
								});
							}

						},
						error(){
							v.$message({
								message: res.msg,
								type: 'error',
							});
						}

					})
				}
			}
		})
	</script>
</body>
</html>
